<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求: 设定课程的成绩: score 根据课程的成绩进行评级
				 注意事项: v-if/v-else位置应该连续 v-else不可以单独使用
			 -->
			<h3 v-if="score >= 90">优秀</h3>
			<h3 v-else-if="score>=80">良好</h3>
			<h3 v-else-if="score>=70">中等</h3>
			<h3 v-else-if="score>=60">及格</h3>
			<h3 v-else>不及格</h3>
			
			<!-- v-show指令 h3标签动态的展现  跟一个布尔类型的值
				style="display: none 如果数据频繁的切换 效率更高
			-->
			<h3 v-show="isShow">展现一个变化的数据</h3>
			<!-- 通过按钮切换状态 -->
			<button @click="isShow = !isShow">切换</button>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					score: 50,
					isShow: true
				}
			})
		</script>
	</body>
</html>
